/*
 * @Author: viivLgr
 * @Date: 2018-06-07 17:09:17
 * @Last Modified by: viivLgr
 * @Last Modified time: 2018-06-07 18:07:21
 */
import React        from 'react';
import {Link}       from 'react-router-dom';

import PageTitle    from 'component/page-title/index.jsx';
import Pagination   from 'util/pagination/index.jsx';
import TableList    from 'util/tableList/index.jsx';
import ListSearch   from './index-list-search.jsx';

import Order        from 'service/order-service.jsx';
import Util         from 'util/util.jsx';

const _order = new Order();
const _util = new Util();

class OrderList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            pageNum : 1,
            listType: 'list'
        }
    }
    componentDidMount(){
        this.loadList();
    }
    loadList(){
        let listParam = {};
        listParam.listType = this.state.listType;
        listParam.pageNum = this.state.pageNum;
        // 如果是搜索的话需要传入搜索类型和搜索关键字
        if(this.state.listType === 'search'){
            listParam.orderNo = this.state.orderNumber;
        }
        console.log(this.state);
        console.log(listParam);
        _order.getOrderList(listParam).then(res => {
            this.setState(res);
        }, errMsg => {
            this.setState({
                list: []
            });
            _util.errorTips(errMsg);
        });
    }
    // 搜索
    onSearch(orderNumber) {
        this.setState({
            listType: 'search',
            pageNum: 1,
            orderNumber: orderNumber
        }, () => {
            this.loadList();
        });
    }
    onPageNumChange(pageNum){
        this.setState({
            pageNum: pageNum
        }, () => {
            this.loadList();
        });
    }
    render() {
        return (
            <div id="page-wrapper">
                <PageTitle title="订单列表"/>
                <ListSearch onSearch={(orderNumber) => this.onSearch(orderNumber)} />
                <TableList tableHeaders={['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作']}>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <tr key={index}>
                                    <td>
                                        <Link to={`/order/detail/${item.orderNo}`}>{item.orderNo}</Link>
                                    </td>
                                    <td>{item.receiverName}</td>
                                    <td>{item.statusDesc}</td>
                                    <td>￥{item.payment}</td>
                                    <td>{new Date(item.createTime).toLocaleString()}</td>
                                    <td>
                                        <Link to={`/order/detail/${item.orderNo}`}>详情</Link>
                                    </td>    
                                </tr>
                            )
                        })
                    }
                </TableList>
                <Pagination 
                    current={this.state.pageNum || 1}
                    total={this.state.total || 0}
                    pageSize={this.state.pageSize || 10}
                    onChange={(pageNum) => this.onPageNumChange(pageNum)}/>
            </div>
        );
    }
}
export default OrderList;